<script setup>
import {onMounted, ref} from "vue";
import {dishListByCategoryId, getList} from "@/apis/api.js";
import Demo61 from "@/components/Demo61.vue";
import Demo62 from "@/components/Demo62.vue";
const dishlist=ref([])
const categoryList=ref([])
const dishParams=ref({category:16})
const categoryParams=ref({type:1})
const getDishList=async()=>{
  try {
    const response = await dishListByCategoryId(dishParams.value);
    dishlist.value = response.data;
    console.log(dishlist.value.length);
  } catch (error) {
    console.error('请求失败:', error);
  }
}
const getCategoryList=async()=>{
  try {
    const response = await getList();
    categoryList.value = response.data;
    console.log(categoryList.value.length);
  } catch (error) {
    console.error('请求失败:', error);
  }
}
onMounted(()=>{
  getDishList()
  getCategoryList()
})
</script>

<template>
  <div class="container">
    <div class="left">
      <ul >
        <li v-for="item in categoryList" :key="item.id">
          <div class="item">
            {{item.name}}
          </div>
        </li>
      </ul>
    </div>

    <div class="right">
      <ul >
        <li v-for="item in dishlist" :key="item.id">
          <div class="item">
            <demo62 :dish="item"></demo62>
          </div>

        </li>
      </ul>
    </div>
  </div>


</template>

<style scoped>
.container {
  /* 开启Flex布局 */
  display: flex;
  width: 100%;
  gap: 20px; /* 两个div之间的间距 */

  }

.left {
  flex: 1; /* 占1份宽度 */
  background: #e0f2fe;
}
.right {
  flex: 1; /* 占1份宽度（与左侧平分） */
  background: #dcfce7;
}


</style>